<template>
  <device-common :action-show="true" :trend-show="true">
    <div v-if="autoIrrigation" class="h12" />
    <el-card v-if="autoIrrigation" class="box-card">
      <div slot="header" class="clearfix flex" style="align-items:center;">
        <span>自动灌溉设置</span>
        <div class="btn-container mlauto">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="addSetting()">自动灌溉设置</el-button>
          <el-button size="mini" type="success" icon="el-icon-refresh" :loading="refreshLoading" @click="getAll()">刷新</el-button>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          v-for="(item,index) in fmArr"
          :key="index"
          :label="item.name"
          :name="item.activeName"
          index
        >
          <el-table
            :data="settings[item.num]"
            style="width: 100%"
            border
            stripe
          >
            <el-table-column
              prop="sensorname"
              label="监测属性"
              align="center"
            />
            <el-table-column
              prop="compare"
              label="运算符"
              align="center"
            >
              <template #default="scope">
                {{ getAttr(scope.row,'compare') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="threshold"
              label="阈值(m³)"
              align="center"
            />
            <el-table-column
              prop="state"
              label="操作"
              align="center"
            >
              <template #default="scope">
                {{ getAttr(scope.row,'state') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="start_time"
              label="开始时间"
              align="center"
            />
            <el-table-column
              prop="end_time"
              label="结束时间"
              align="center"
            />
            <template slot="empty">
              <div style="margin-bottom:-24px;">暂无数据</div>
              <el-button type="primary" icon="el-icon-plus" @click="addSetting">添加自动灌溉设置</el-button>
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        :title="`设置 电磁阀${num} 自动灌溉`"
        :visible.sync="dialogVisible"
        width="1000px"
        append-to-body
      >
        <el-table
          :data="datas"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column
            prop="sensorname"
            label="监测属性"
            align="center"
          >
            <template #default="scope">
              <el-select v-model="scope.row.sensornumber" placeholder="监测属性" clearable filtrable>
                <el-option
                  v-for="(item,index) in rtuPortDisplays.filter((val) => {
                    return val.namekey.indexOf(num) > -1
                  })"
                  :key="index"
                  :label="item.name"
                  :value="`item${item.idx}`"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="compare"
            label="运算符"
            align="center"
          >
            <template #default="scope">
              <el-select v-model="scope.row.compare" placeholder="运算符" clearable filtrable>
                <el-option v-for="(item,index) in compares" :key="index" :label="item.name" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="threshold"
            label="阈值(m³)"
            align="center"
          >
            <template #default="scope">
              <el-input v-model="scope.row.threshold" type="number" placeholder="阈值" clearable />
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="操作"
            align="center"
            width="80"
          >
            <template #default="scope">
              <el-tag :type="getAttr(scope.row,'state')==='关闭'?'danger':'success'">{{ getAttr(scope.row,'state') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="start_time"
            label="起止时间"
            align="center"
            width="380"
          >
            <template #default="scope">
              <el-time-picker
                v-model="scope.row.timetran"
                is-range
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                align="center"
                value-format="HH:mm:ss"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="h12" />
        <el-button type="primary" icon="el-icon-document" :loading="submitLoading" @click="submit">提交</el-button>
        <el-button type="default" @click="reset">重置</el-button>
      </el-dialog>
    </el-card>
  </device-common>
</template>

<script>
import DeviceCommon from '@/components/Device/common'
import { getOne, addOne } from '@/api/ym'
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils'
export default {
  components: {
    DeviceCommon
  },
  data() {
    return {
      autoIrrigation: false,
      refreshLoading: false,
      submitLoading: false,
      datas: [
        { sensornumber: '', compare: '', threshold: '', state: 1, timetran: '' },
        { sensornumber: '', compare: '', threshold: '', state: 0, timetran: '' }
      ],
      dialogVisible: false,
      activeName: 'first',
      fmArr: [{
        name: '电磁阀1',
        activeName: 'first',
        num: 1
      }, {
        name: '电磁阀2',
        activeName: 'second',
        num: 2
      }, {
        name: '电磁阀3',
        activeName: 'third',
        num: 3
      }],
      map: {
        first: 1,
        second: 2,
        third: 3
      },
      settings: {},
      rtuPortDisplays: [],
      compares: [
        { name: '大于', value: 1 },
        { name: '小于', value: 2 }
      ]
    }
  },
  computed: {
    ...mapGetters(['currentDevice']),
    num() {
      return this.map[this.activeName]
    },
    serialno() {
      return this.currentDevice && this.currentDevice.serialno || '0202.0007.2327000001'
    }
  },
  created() {
    this.rtuPortDisplays = deepClone(this.currentDevice.rtuPortDisplays.filter((val) => {
      return !['bool', 'enum'].includes(val.datatype)
    }))
    // this.getAll()
  },
  methods: {
    reset() {
      this.datas = [
        { sensornumber: '', compare: '', threshold: '', state: 0, timetran: '' },
        { sensornumber: '', compare: '', threshold: '', state: 1, timetran: '' }
      ]
    },
    async submit() {
      this.submitLoading = true
      this.datas.map((val) => {
        val.num = this.num
        return val
      })
      addOne(this.serialno, this.num, this.datas).then((res) => {
        this.$message.success(res.msg)
        this.dialogVisible = false
        this.submitLoading = false
        this.reset()
        this.getOne(this.num)
      }).catch(() => {
        this.submitLoading = false
      })
    },
    addSetting() {
      this.dialogVisible = true
    },
    getAll() {
      this.refreshLoading = true
      for (const item in this.map) {
        this.getOne(this.map[item])
      }
    },
    async getOne(num) {
      const { data } = await getOne(this.serialno, num)
      this.settings[num] = data
      this.settings = JSON.parse(JSON.stringify(this.settings))
      if (num === 3) {
        this.refreshLoading = false
      }
    },
    getAttr(row, name) {
      if (name === 'compare') {
        return { 1: '大于', 2: '小于' }[row.compare] || ''
      }
      if (name === 'state') {
        return { 1: '开启', 0: '关闭' }[row.state] || ''
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
